<template>
  <view>
    <view class="assets-page">
      <HeaderNav></HeaderNav>

      <view class="assets-conter">
        <view class="assete-card">
          <view class="row-tit">
            <view>{{ i18n.h148 }}(AKC)</view>
            <image
              @click="showPrice"
              v-if="isShow"
              src="/static/images/eye.png"
              alt=""
              mode="widthFix"
              class="bg3"
            />
            <image
              @click="showPrice"
              v-if="!isShow"
              src="/static/images/eyeoff.png"
              alt=""
              mode="widthFix"
              class="bg3"
            />
          </view>
          <view class="tipes">{{ i18n.h146 }}：{{ i18n.h147 }}</view>
          <view v-if="isShow" class="total"> {{ AKCBalance || 0 }}</view>
          <view v-else class="nototal">***</view>

          <view class="row-icon">
            <image src="/static/images/USDT.png" alt="" class="lefts" />
            <view class="rights">
              <view>USDT</view>
              <view v-if="isShow">{{ USDTBalance || 0 }}</view>
              <view v-else>***</view>
            </view>
          </view>
          <view class="row-icon">
            <image src="/static/images/USDT.png" alt="" class="lefts" />
            <view class="rights">
              <view>cUSDT</view>
              <view v-if="isShow">{{ CUSDTBalance || 0 }}</view>
              <view v-else>***</view>
            </view>
          </view>
          <view class="row-menus">
            <view class="item" @click="toPage('/subPackages/other/withdraw')">
              <image src="/static/images/withdraw.png" alt="" />
              <view>{{ i18n.h92 }}</view>
            </view>
            <view class="item" @click="toPage('/subPackages/other/deposit')">
              <image src="/static/images/deposit.png" alt="" />
              <view>{{ i18n.h93 }}</view>
            </view>
            <view class="item" @click="toPage('/subPackages/other/exchange')">
              <image src="/static/images/exchange.png" alt="" />
              <view>{{ i18n.h94 }}</view>
            </view>
            <view
              class="item"
              @click="toLink('https://hub-mainnet.akashicrecords.io')"
            >
              <image src="/static/images/crosschain.png" alt="" />
              <view>{{ i18n.h141 }}</view>
            </view>
          </view>
        </view>
        <view class="label-item">
          <view class="lefts">{{ i18n.h95 }}</view>
          <view class="rights" @click="showpicker = true">
            <view>{{ atvName }}</view>
            <image src="/static/images/down.png" alt="" />
          </view>
        </view>
        <view class="list-cont">
          <view class="row-header">
            <view>{{ i18n.h96 }}</view>
            <view>{{ i18n.h142 }}</view>
            <view>{{ i18n.h97 }}</view>
          </view>
          <view v-if="list.length > 0">
            <view class="row-item" v-for="(item, index) in list" :key="index">
              <view>{{ getTemp(item.Createtime) }}</view>
              <view>{{ item.Remark }}</view>
              <view v-if="item.Types == 1">+{{ item.Amount }} </view>
              <view v-if="item.Types == 2">-{{ item.Amount }} </view>
            </view>
          </view>
          <view v-else>
            <empty :MarginT="100"></empty>
          </view>
        </view>
      </view>
    </view>
    <u-picker
      @cancel="showpicker = false"
      @confirm="confirmCilc"
      :show="showpicker"
      :columns="columns"
      :cancelText="i18n.h4"
      :confirmText="i18n.h5"
    ></u-picker>
    <FooterNav :modelKey="5" />
  </view>
</template>
<script>
import HeaderNav from "../../components/header-nav/header-nav.vue";
import FooterNav from "@/components/footer-nav/footer-nav.vue";
import uniCopy from "@/js_sdk/xb-copy/uni-copy.js";
import config from "@/config/index.js";

import { getBalanceApi, getCoinlogApi } from "@/api/module/home";
import {} from "@/common/wb3";

export default {
  components: {
    HeaderNav,
    FooterNav,
  },
  props: {},
  data() {
    return {
      Balance: 5468,
      isShow: true,
      showpicker: false,
      // columns: [
      //   [this.$t("home.h92"), this.$t("home.h93"), this.$t("home.h94")],
      // ],
      // atvName: this.$t("home.h92"),
      columns: [["CUSDT", "USDT", "AKC"]],
      atvName: "AKC",
      list: [],
      resultList: [],
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        totalPage: 1,
      },
      atvParms: 1,
      AKCBalance: 0,
      USDTBalance: 0,
      CUSDTBalance: 0,
    };
  },

  watch: {},
  computed: {
    i18n() {
      return this.$t("home");
    },
  },

  created() {},
  mounted() {},
  onShow() {
    this.init();
    let parmas = uni.getStorageSync("user") ? uni.getStorageSync("user") : "";

    if (parmas !== "") {
      this.address = config.linkUrl + "?id=" + parmas;
    }
  },
  methods: {
    init() {
      this.getInfo();
      this.getList();
    },
    getInfo() {
      getBalanceApi().then((res) => {
        if (res.code == 0) {
          this.AKCBalance = res.data.AKC;
          this.USDTBalance = res.data.USDT;
          this.CUSDTBalance = res.data.CUSDT;
        }
      });
    },
    getList() {
      this.list = [];
      const data = {
        cointype: this.atvName,
      };
      getCoinlogApi(data).then((res) => {
        if (res.code == 0) {
          this.list = res.data || [];
        }
      });
    },
    showPrice() {
      this.isShow = !this.isShow;
    },
    confirmCilc(e) {
      console.log("index", e.indexs[0]);

      console.log("选择的", e);

      this.atvName = e.value[0];
      this.showpicker = false;
      this.getList();
    },
    copy() {
      uniCopy({
        content: this.address,
        success: (res) => {
          uni.showToast({
            title: this.$t("home.h25"),
            icon: "none",
          });
          this.shareModel = false;
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },

    toPage(path) {
      if (path !== "") {
        uni.navigateTo({
          url: path,
        });
      }
    },
    toLink(path) {
      window.open(path, "_blank");
    },
    toRecord(type) {
      uni.navigateTo({
        url: `/pages/home/record?type=${type}`,
      });
    },
    number2string(num) {
      num = String(num);
      var eSplit = num.split("e");
      var e = +(eSplit[1] || 0);
      var pad = "0".repeat(500);
      var numSplit = eSplit[0].split(".");
      var str;
      var numSplit1 = numSplit[1] || "";
      if (e < 0) {
        str = "0." + (pad + numSplit[0]).slice(e) + numSplit1;
      } else {
        str =
          numSplit[0] +
          (numSplit1 + pad).slice(0, e) +
          "." +
          numSplit1.slice(e);
      }
      return (
        str
          .replace(/\.?0*$/, "")
          .replace(/^0*/, "")
          .replace(/^\./, "0.") || "0"
      );
    },
    getTemp(timestamp) {
      // let timestamp = 1662537367
      // 此处时间戳以毫秒为单位
      let date = new Date(parseInt(timestamp) * 1000);
      let Year = date.getFullYear();
      let Moth =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let Minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let Sechond =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return (
        Year +
        "-" +
        Moth +
        "-" +
        Day +
        " " +
        Hour +
        ":" +
        Minute +
        ":" +
        Sechond
      );
      // let  GMT =  Year + '-' + Moth + '-' + Day + '   '+ Hour +':'+ Minute  + ':' + Sechond;
      // 时间戳

      console.log(GMT); // 2022-09-07 15:56:07
    },
    getCaption(strings) {
      var strLength = strings.length;
      var shortName = strings.substring(0, 2);
      var shortName2 = strings.substring(strLength - 4, strLength);
      let str = `${shortName}...${shortName2}`;
      return str;
    },
  },
};
</script>
 <style lang="scss" scoped>
.assets-page {
  .assets-conter {
    padding: 0 32rpx 120rpx;
    .assete-card {
      background: #f5f3fe;
      border-radius: 30rpx;
      border: 2rpx solid #dcd6fb;
      padding: 46rpx;
      .row-tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        view {
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
        }
        image {
          width: 36rpx;
          height: 36rpx;
        }
      }
      .tipes {
        font-size: 26rpx;
        margin-top: 8rpx;
        // color: #777777;
      }
      .total {
        font-weight: 600;
        font-size: 64rpx;
        color: #000000;
        margin: 32rpx 0;
      }
      .nototal {
        font-weight: bold;
        font-size: 64rpx;
        color: #000000;
        height: 96rpx;
        line-height: 120rpx;
        margin: 32rpx 0;
      }
      .row-icon {
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 34rpx 32rpx;
        background: #ffffff;
        border-radius: 32rpx;
        .lefts {
          width: 60rpx;
          height: 60rpx;
        }
        .rights {
          margin-left: 12rpx;
          flex: 1;
          display: flex;
          justify-content: space-between;
          view {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }
      }
      .row-menus {
        margin-top: 30rpx;
        display: grid;
        grid-template-columns: 148rpx 148rpx 148rpx 148rpx;
        justify-content: space-between;
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          image {
            width: 85rpx;
            height: 85rpx;
          }
          view {
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            margin-top: 20rpx;
          }
        }
      }
    }
    .label-item {
      margin: 64rpx 0 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .lefts {
        font-weight: 600;
        font-size: 36rpx;
        color: #000000;
      }
      .rights {
        display: flex;
        align-items: center;
        view {
          font-weight: 400;
          font-size: 26rpx;
          color: #835bf1;
          margin-right: 6rpx;
        }
        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    .list-cont {
      .row-header {
        padding: 16rpx 24rpx;
        // display: flex;
        display: grid;
        grid-template-columns: 28% 35% 35%;
        justify-content: space-between;
        align-items: center;
        view {
          font-weight: 400;
          font-size: 24rpx;
          color: #97a3b6;
        }
        :nth-child(2) {
          text-align: center;
        }
        :nth-child(3) {
          text-align: right;
        }
      }
      .row-item {
        margin-bottom: 16rpx;
        padding: 26rpx 24rpx;
        background: #f8fafc;
        border-radius: 32rpx;
        // display: flex;
        display: grid;
        grid-template-columns: 28% 35% 35%;
        justify-content: space-between;
        align-items: center;
        view {
          font-size: 24rpx;
          color: #000000;
        }
        :nth-child(1) {
          font-weight: 400;
        }
        :nth-child(2) {
          text-align: center;
        }
        :nth-child(3) {
          text-align: right;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
